<template>
	<view class="content">
		<view class="top-box u-text-center">
			<u-avatar :src="avaUrl" size="128" class="u-m-b-76"></u-avatar>
			<text class="tips">请先输入账号密码进行绑定</text>
		</view>
		<view class="form-box">
			<u-form :model="account" ref="accountForm">
				<u-form-item prop="userName" :border-bottom="false" class="u-m-b-40 form-item">
					<u-input class="form-input" type="number" height="104" v-model="account.userName" placeholder="请输入账号"></u-input>
				</u-form-item>
				<u-form-item :border-bottom="false" class="u-m-b-36 form-item">
					<u-input class="form-input" height="104" v-model="account.password" type="password" placeholder="请输入密码"></u-input>
				</u-form-item>
				<view class="control-box">
					<u-checkbox @change="rememberChange" v-model="rememberPassword">记住账号</u-checkbox>
					<text @click="forgotPassword">忘记密码</text>
				</view>
				<u-modal v-model="show" title="" content="请联系管理员为您重置密码"></u-modal>
				<u-button class="btn-style" shape="circle" hover-class="none" :hair-line="false" @click="login">登录</u-button>
			</u-form>
		</view>
		<u-top-tips ref="uTips" :navbar-height="0"></u-top-tips>
	</view>
</template>

<script>
export default {
	data() {
		return {
			avaUrl: '../../static/logo.png',
			account: {
				userName: '',
				password: ''
			},
			rememberPassword: false, //是否记住密码
			show: false, //弹窗提示
			rules: {
				userName: [
					{
						required: true,
						message: '请输入账号',
						trigger: ['blur', 'change']
					},
					{
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
						message: '手机号格式不正确',
						trigger: ['blur', 'change']
					}
				]
			}
		};
	},
	onLoad() {
		this.avaUrl = uni.getStorageSync('userInfo').HEAD_IMGURL;
		this.rememberPassword = Boolean(uni.getStorageSync('account')) || false;
		this.account = uni.getStorageSync('account') || { userName: '', password: '' };
	},
	onReady() {
		this.$refs.accountForm.setRules(this.rules);
	},
	methods: {
		rememberChange() {
			this.rememberPassword = !this.rememberPassword;
		},
		forgotPassword() {
			this.show = true;
		},
		async login() {
			const result = await this.$http.post('http://60.205.156.133:8088/qy/exam/user/doLoginAndBind', {
				userName: this.account.userName,
				qyUserId: uni.getStorageSync('qyUserId'),
				password: this.account.password
			});
			if (result.data.errorCode == 'G1001') {
				if (this.rememberPassword) {
					uni.setStorageSync('account', this.account);
				}
				uni.reLaunch({
					url: '../index/index'
				});
			} else {
				this.$refs.uTips.show({
					title: '用户名或密码错误',
					type: 'error',
					icon: false
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	background: white;
	padding: 0 64upx;
	.top-box {
		padding-top: 136upx;

		.tips {
			display: block;
			color: #5d5d5d;
			margin-bottom: 42upx;
		}
	}
	.form-box {
		.form-item {
			padding: 0;
			.form-input {
				width: 100%;
				border-radius: 100upx;
				background: #f4f4f4;
				padding: 0 52upx !important;
			}
		}
		.control-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 76upx;

			text {
				color: $color-2d6;
				font-size: 30upx;
			}
		}
		.btn-style {
			height: 88upx;
			color: white;
			background: $color-2d6;
		}
	}
}
</style>
